<template>
  <div style="background-color: white;">
    <div class="flex">
      <div class="box-title">
        <div class="vertical-line vertical-line-black" />
        <span class="title-span">栏目最新</span>
      </div>
    </div>
    <div class="content">
      <div class="text-box flex" v-for="(item, index) in columList" :key="item.id">
        <div
          :class="{ 'index': true, 'default-index': true, 'index0': index === 0, 'index1': index === 1, 'index2': index === 2 }">
          {{
            index+1 }}</div>
        <div class="text">{{ item.university + item.major }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { columList } from './data'
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
